<template>
  <div style="width: 20%">
    <div
      :id="'myChart' + index"
      style="width: 300px; height: 150px; margin-top: 20px"
    ></div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, onMounted, watchEffect, nextTick } from 'vue';
import * as echarts from 'echarts'; // 引入echarts
const props = defineProps({
  index: {
    type: Number,
    default: 0,
  },
  publicItem: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const echartsInit =(publicItem:any) => {
  nextTick(() => { 
  // 找到容器
  const chartContainer = document.getElementById(`myChart${props.index}`);
  if (chartContainer) {
    // 初始化ECharts实例
    const myChart = echarts.init(chartContainer);

    // 开始渲染
    myChart.setOption({
      grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0,
        top: '15%',
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
        position: 'center',
      },

      tooltip: {
        trigger: 'item',
        confine: true,
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
        formatter: (params) => {
          if (Number(params.data.value[0]) === 0) {
            params.data.value[0] = '低危';
          } else if (Number(params.data.value[0]) === 1) {
            params.data.value[0] = '中危';
          } else if (Number(params.data.value[0]) === 2) {
            params.data.value[0] = '高危';
          } else if (Number(params.data.value[0]) === 3) {
            params.data.value[0] = '超危';
          } else if (Number(params.data.value[0]) === -1) {
            params.data.value[0] = '未知';
          } else if (params.data.value[0] == undefined) {
            params.data.value[0] = '-';
          }
          if (Number(params.data.value[1]) === 0) {
            params.data.value[1] = '低';
          } else if (Number(params.data.value[1]) === 1) {
            params.data.value[1] = '中';
          } else if (Number(params.data.value[1]) === 2) {
            params.data.value[1] = '高';
          } else if (params.data.value[1] == undefined) {
            params.data.value[1] = '-';
          }
          if (Number(params.data.value[2]) === 0) {
            params.data.value[2] = '困难';
          } else if (Number(params.data.value[2]) === 1) {
            params.data.value[2] = '一般';
          } else if (Number(params.data.value[2]) === 2) {
            params.data.value[2] = '容易';
          } else if (params.data.value[2] == undefined) {
            params.data.value[2] = '-';
          }
          const str =
            '&nbsp;' +
            '暴露风险：' +
            params.data.value[0] +
            '<br/>' +
            '&nbsp;' +
            '资产暴露程度：' +
            params.data.value[1] +
            '<br/>' +
            '&nbsp;' +
            '易受攻击程度：' +
            params.data.value[2];
          return str;
        },
      },
      radar: {
        radius: '85%', // 大小
        nameGap: 1, // 图中工艺等字距离图的距离
        center: ['50%', '50%'], // 图的位置
        name: {
          textStyle: {
            color: 'rgba(255, 255, 255, 0.5)',
            fontSize: '10px',
          },
          formatter(name) {
            return name;
          },
        },
        indicator: [
          { max: 5, min: -1, name: '暴露风险' },
          { max: 3, min: -1, name: '资产暴露程度' },
          { max: 3, min: -1, name: '易受攻击程度' },
        ],
        axisLine: {
          lineStyle: {
            color: 'rgba(231, 231, 233, 0.3)', // 轴颜色
          },
        },
        splitArea: {
          show: false,
          areaStyle: {
            color: 'rgba(231, 231, 233, 0.3)', // 图表背景的颜色
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 0.6,
            color: 'rgba(231, 231, 233, 0.3)', // 网格的颜色
          },
        },
      },
      series: [
        {
          name: '',
          type: 'radar',
          symbol: 'angle',
          itemStyle: {
            normal: {
              areaStyle: { type: 'default' },
            },
          },
          data: [
            {
              symbol: 'circle', // 圆点
              symbolSize: 2, // 圆点大小
              value: [
                props.publicItem.exposureRisk,
                props.publicItem.exposureLevel,
                props.publicItem.vulnerability,
              ],
              areaStyle: { color: 'rgba(58, 125, 255, 0.3)' },
              itemStyle: {
                normal: {
                  borderWidth: 0.9,
                  color: '#0289f7',
                  borderColor: '#0289f7',
                },
              },
              lineStyle: {
                color: '#0289f7',
                width: 0.9,
              },
            },
          ],
        },
      ],
    });
  }

   })


};
watchEffect(() => {
  echartsInit(props.publicItem);
});
</script>

<style scoped>
#myChart {
  width: 200px;
  height: 200px;
}
</style>
